import React, { useState } from 'react';
import { isAssetTypeAnImage } from '@/utils/utils';
import { FilePdfOutlined } from '@ant-design/icons';
import { Col, Row } from 'antd';
import styles from './index.less';
import FileOpen from '../FileIframOpen';

interface renderFileProps {
  title?: string;
  fielUrl: string;
}

const RenderFile: React.FC<renderFileProps> = (props) => {
  const { title, fielUrl } = props;
  const [showFile, setShowFile] = useState<boolean>(false);
  const [fileUrl, setFileUrl] = useState<string>('');

  const urlList = fielUrl ? fielUrl.split(',') : [];

  return (
    <span style={{ width: '100%'}}>
      <Row gutter={[10, 10]}>
      {urlList.map((item, index) => {
        return (
          <Col xs={24} sm={12} md={12} lg={8} xl={6} key={index}>
            {isAssetTypeAnImage(item) ? (
              <a
                className={styles.imgBox}
                onClick={() => {
                  setFileUrl(item);
                  setShowFile(true);
                }}
                rel="noreferrer"
              >
                <img src={item} />
              </a>
            ) : (
              <a
                className={styles.fileBox}
                onClick={() => {
                  setFileUrl(item);
                  setShowFile(true);
                }}
                rel="noreferrer"
              >
                <a className={styles.icon}>
                  <FilePdfOutlined />
                </a>
                <a
                  onClick={() => {
                    setFileUrl(item);
                    setShowFile(true);
                  }}
                  rel="noreferrer"
                >
                  {item ? '查看文件' : '-'}
                </a>
              </a>
            )}
          </Col>
        );
      })}
    </Row>
    {showFile && (
        <FileOpen
          title={title}
          fielUrl={fileUrl}
          modalVisible={showFile}
          onCancel={() => {
            setShowFile(false);
            setFileUrl('');
          }}
        />
      )}
    </span>
  );
};

export default RenderFile;
